<template>
  <div>
    <!-- 引入导航栏组件 -->
    <NavBar />
    <!-- 为您的爱宠提供专业医疗服务部分 -->
    <div class="hero-section">
      <div class="hero-text">
        <h1>权威医疗守护，筑牢宠物健康</h1>
        <p>专业兽医团队，先进医疗设备，守护宠物健康每一刻</p>
        <button class="btn" @click="goToReservation">立即预约</button>
      </div>
    </div>
    <!-- 热门服务项目部分 -->
    <div class="popular-services-section">
      <h2>热门服务项目</h2>
      <div class="service-item" v-for="(service, index) in services" :key="index">
        <div class="service-content">
          <img :src="service.image" :alt="service.title">
          <div class="service-details">
            <h3>{{ service.title }}</h3>
            <p>{{ service.description }}</p>
            <span class="price">{{ service.price }}</span>
            <button class="btn" @click="goToReservation">立即预约</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 我们的特色服务部分 -->
    <div class="features-section">
      <h2>我们的特色服务</h2>
      <div class="feature-item" v-for="(feature, index) in features" :key="index">
        <img :src="feature.image" :alt="feature.title">
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.description }}</p>
      </div>
    </div>
    
    <!-- 顾客评价部分 -->
    <div class="reviews-section">
      <h2>顾客评价</h2>
      <div class="review-item" v-for="(review, index) in reviews" :key="index">
        <img :src="review.avatar" :alt="review.name" class="customer-avatar">
        <div class="review-content">
          <h3>{{ review.name }}</h3>
          <div class="rating">
            <i class="fa fa-star" v-for="(star, index) in review.rating" :key="index"></i>
          </div>
          <p>{{ review.content }}</p>
        </div>
      </div>
    </div>
    <!-- 立即预约部分 -->
    <div class="cta-section">
      <h2>立即预约</h2>
      <p>为您的爱宠预约专业的医疗服务，开启健康守护之旅</p>
      <button class="btn" @click="goToReservation">在线预约</button>
      <button class="btn btn-outline">联系客服</button>
    </div>
    <!-- 引入底部信息组件 -->
    <PageFooter />
  </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
import PageFooter from '@/components/PageFooter.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

function goToReservation() {
  router.push('/reservation');
}

// 热门服务项目数据
const services = [
  {
    title: "常见疾病诊疗",
    description: "当宠物出现身体不适，如频繁打喷嚏、食欲不振、腹泻等症状时，我们的专业兽医会进行细致问诊，了解宠物近期饮食、活动、排便等情况。随后进行全面体格检查，借助先进诊断设备，如血常规检测仪、粪便分析仪等，精准判断病因。确诊后，依据宠物病情、年龄、体重等因素，制定个性化治疗方案，采用安全有效的药物治疗，并全程跟踪宠物恢复情况，随时调整用药与护理建议。无论是猫咪的猫瘟、狗狗的细小病毒感染，还是各类呼吸道、消化道常见疾病，都能提供专业诊疗",
    price: "价格：200 元起（含初诊费）",
    image: require('@/assets/service1.png')
  },
  {
    title: "疫苗接种",
    description: "严格遵循疫苗接种规范流程，从正规渠道引进品质可靠的进口疫苗，涵盖犬瘟热、细小病毒、猫三联等常见疫苗种类。在接种前，兽医会对宠物进行健康评估，确认宠物身体状况适宜接种。接种时，医护人员操作规范、手法轻柔，减少宠物不适感。接种后，为宠物建立专属免疫档案，详细记录疫苗品牌、接种时间、批次等信息，并贴心提醒下次接种时间。同时，向宠物主人科普疫苗接种后的注意事项，如观察宠物有无不良反应、避免洗澡等，全方位保障宠物免疫效果与健康安全",
    price: "价格：单苗 80 元 / 针，联苗 150 元 / 针",
    image: require('@/assets/service2.png')
  },
  {
    title: "手术治疗",
    description: "由经验丰富、技术精湛的外科兽医主刀，团队具备深厚的外科手术功底与应急处理能力。可开展多种宠物手术，如绝育手术、骨折复位固定手术、软组织创伤修复手术等常规手术，以及一些复杂的内脏手术等疑难手术。手术室严格按照无菌标准建设，配备先进的麻醉监护设备、手术器械与急救设备，确保手术过程中宠物生命体征稳定。术前，兽医会与宠物主人充分沟通手术风险、流程与术后护理事项；术中，严格把控手术操作规范；术后，提供专业的护理指导与康复方案，助力宠物快速恢复",
    price: "价格：小型手术 500 元起，大型手术根据具体情况面议",
    image: require('@/assets/service3.png')
  },
  {
    title: "健康体检",
    description: "精心设计全面且个性化的体检套餐，基础体检套餐包含体温、心率、呼吸、体重等基础体格检查项目，还会对宠物口腔、眼睛、耳朵、皮肤毛发等进行细致检查，初步评估宠物身体基本状况。全面体检套餐在此基础上，增加血液检查（检测血常规、血生化指标等，评估宠物肝脏、肾脏、胰腺等器官功能）、尿液检查（检测尿液成分，排查泌尿系统疾病）、超声检查（观察内脏器官形态、结构与功能）等项目。体检结束后，专业兽医会对各项检查结果进行详细解读，出具完整、易懂的体检报告，并根据宠物身体状况给出科学合理的饮食、运动、护理等方面的健康建议，帮助宠物主人更好地呵护宠物健康",
    price: "价格：基础体检套餐 300 元，全面体检套餐 800 元",
    image: require('@/assets/service4.png')
  }
];

// 特色服务数据
const features = [
  {
    title: "专业兽医团队",
    description: "拥有多位有丰富临床经验与专业资质的兽医，擅长多种宠物疾病诊断与治疗，为您的爱宠健康保驾护航",
    image: require('@/assets/feature1.png')
  },
  {
    title: "先进医疗设备",
    description: "引进国际领先的宠物专用医疗检测设备，如数字化 X 光机、彩色超声诊断仪等，精准检测宠物健康状况",
    image: require('@/assets/feature2.png')
  },
  {
    title: "舒适就医环境",
    description: "打造温馨、整洁、无菌的就诊空间，减少宠物就医应激反应，提供舒适的诊疗体验",
    image: require('@/assets/feature3.png')
  },
  {
    title: "全方位医疗方案",
    description: "根据宠物个体差异，制定涵盖预防、诊断、治疗、康复的个性化医疗方案，保障宠物健康",
    image: require('@/assets/feature4.png')
  }
];

// 顾客评价数据
const reviews = [
  {
    name: "陈悦",
    rating: 5,
    content: "我家狗狗突发肠胃问题，医生很专业也很耐心，很快治好啦，现在狗狗已经恢复活力啦，真的很感谢！",
    avatar: require('@/assets/customer1.png')
  },
  {
    name: "赵宇",
    rating: 5,
    content: "带猫咪来打疫苗，医护人员手法温柔，讲解也很细致，医院环境干净卫生，以后宠物看病就选这儿了！",
    avatar: require('@/assets/customer2.png')
  },
  {
    name: "李诗涵",
    rating: 5,
    content: "给我家宝贝做了全面体检，报告解读得很清楚，还给出了饮食和护理的建议，服务超贴心，强烈推荐！",
    avatar: require('@/assets/customer3.png')
  }
];
</script>

<style scoped>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

/* 为您的爱宠提供专业医疗服务部分样式 */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../assets/grooming-hero.jpg');
  background-size: cover;
  background-position: center;
  padding: 80px;
  color: white;
  height: 600px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  animation: heroAnimation 1.5s ease;
}
@keyframes heroAnimation {
  from {
    opacity: 0.5;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  width: 70%;
  text-align: center;
  font-size: 30px;
  line-height: 1.4;
}

/* 热门服务项目部分样式 */
.popular-services-section {
  padding: 80px;
  text-align: center;
}

.service-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 30px auto;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: serviceAnimation 1.5s ease;
}
@keyframes serviceAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.service-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.service-content img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 30px;
}

.service-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.price {
  color: #e76f51;
  font-weight: bold;
  margin-top: 10px;
}

/* 我们的特色服务部分样式 */
.features-section {
  padding: 80px;
  text-align: center;
  background-color: #f9f9f9;
}
.feature-item {
  display: inline-block;
  width: 20%;
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: featureAnimation 1.5s ease;
}
@keyframes featureAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.feature-item img {
  width: 80%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
}

/* 顾客评价部分样式 */
.reviews-section {
  padding: 80px;
  text-align: center;
}
.review-item {
  display: inline-block;
  width: 30%;
  margin: 10px;
  text-align: left;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: reviewAnimation 1.5s ease;
}
@keyframes reviewAnimation {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.review-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.customer-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}
.rating {
  color: #e9c46a;
  margin-bottom: 10px;
}

/* 立即预约部分样式 */
.cta-section {
  padding: 80px;
  text-align: center;
  background-color: #fbe8dc;
}

/* 按钮样式 */
.btn {
  background-color: #e76f51;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin: 10px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #d65c41;
}
.btn-outline {
  background-color: transparent;
  color: #e76f51;
  border: 2px solid #e76f51;
  padding: 15px 30px;
  border-radius: 8px;
  cursor: pointer;
  margin: 10px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover {
  background-color: #e76f51;
  color: white;
}
</style>